Migrating Technologies with LaunchDarkly

With Feature Flags, We Can Make Migrations A Lot Less Scary!

Picking up from where we last left off, we successfully updated the new webstore for Toggle Outfitters with a fancy new "Add to Cart" functionality, but when we tried out the new functionality - the cart doesn't actually work.

For this section, we're going to flex our backend development muscles and ship an API migration and Database migration using LaunchDarkly. 💪

For this particular application, we'll be using the built in API capabilities of NextJS, but the principles we will be utilizing are applicable to any API framework.

Now, let's fix that nasty bug! 🐛

🎏 Create the API Feature Flag

It's always a good practice to create different flags for different frontend or backend components in our applications. Using LaunchDarkly lets you break your code into manageable pieces. In the case of the problem we've discovered here, for this migration, we are working with two components: our frontend UI code and backend API code. Let's work on the backend API code to resolve our issue.

Step 1: At this point, you should be starting to feel like a feature flag pro. Here's the details for the next flag we'll need:

Flag Name: Migrate to Stripe API
Flag Key:
Type: Boolean
Description: optional, if you would like to add
Tags: optional, if you would like to add
Client-Side SDK Availability:
Variations: true:, false:

🚧 Fixing our API Code

Step 1: To restore our functionality and complete our migration, first locate the checkout.ts file in the /src/pages/api/ directory.

Step 2: Working with our peers on the backend team, we've gotten a new set of code to implement in our API that'll enable communication with Stripe, this a big code block to fill in, you're replacing the code on lines 47-52 with all of this, use the copy button!:

//in this code, we are first retrieving the value for the enableStripe flag, 
// then, if it returns true, running a function that creates a checkout session in stripe. 
//If you want to see how that works, take a look at the `/src/utils/checkout-helpers.ts` file.

  if (req.method === 'POST') {
  const enableStripe = await ldClient.variation("enableStripe", jsonObject, false);

    if (enableStripe) {
      createCheckoutForStripe(req, res)
    }
  } if (req.method === 'GET') {
    const enableStripe = await ldClient.variation("enableStripe", jsonObject, false);
  
    if (enableStripe) {
      try {
        res.send("You are good to go!");
      } catch (error: any) {
        console.error(error.message);
      }
    } else {
      return res.json("the API is unreachable");
    }
  }

It looks like there's a lot going on here, but the most important thing is that this code is handling the routing to Stripe for us. We should be good to go, but we'll want to test it out first, using LaunchDarkly.

Step 2: Try it out! Turn on the flag you created and if everything was configured correctly, you should be able to add items to the cart and see our new checkout screen because you are currently still logged in as a Developer! 🎉

Great job! You've just used a feature flag to successfully help us migrate away from our old self-hosted billing system to an ecommerce one. But just like how we wanted to control which users experienced our new frontend components, we want to add some governance capabilities to our API migration to ensure that things go smoothly and we can fix them immediately in case of another failure.

Troubleshooting Tips
If you are having trouble with this step:

• Make sure you have the correct values in your .env file for Stripe. If you cannot communicate with the Stripe API, you'll see an error.
• Make sure you copied the API code exactly as is, did you use the copy button or did you select it with your mouse?
• Double check that your flag value is being imported correctly.